<template>
  <div class="setting-r-content" style="overflow-y:auto;">
    <Row class="setting-r-c_params">
      <Col span="24" class="col_1">
      <Icon style="font-size:20px;" type="md-reorder" />
      <h2>行业管理</h2>
      </Col>
      <Col span="24" class="col_2">
      <div class="button_add">
        <Button size="small" @click="onNewBuild">新增</Button>
      </div>
      <div class="table_list">
        <Table :columns="columns" :loading="loading" border :data="tableData" />
      </div>
      </Col>
      <Modal v-model="dialogVisible" title="新增行业名称">
        <Form :model="addForm" :label-width="80" ref="refAdd" :rules="rules">
          <FormItem label="行业名称:" prop="name">
            <Input style="width:80%;" v-model="addForm.name" placeholder="请输入行业名称..."></Input>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button @click="dialogVisible=false;">取消</Button>
          <Button :loading="btnDisabled" type="primary" @click="onSubmit">
            <span v-if="!btnDisabled">确认</span>
            <span v-else>保存中</span>
          </Button>
        </div>
      </Modal>
    </Row>
  </div>
</template>
<script>
import { generatedColumns } from "./utils"
import { validateAddress } from "@/utils/rules"
import { postTrade, getTrade, deleteTrade } from "@/api"
export default {
  mounted() {
    this.getTradeList()
  },
  data() {
    const vm = this
    return {
      dialogVisible: false,
      columns: [...generatedColumns(vm)],
      tableData: [],
      loading: false,
      addForm: {
        name: ""
      },
      rules: {
        name: [
          {
            required: true,
            validator: validateAddress(
              "行业名称",
              "行业名称只能输入中文、字母、数字、下划线和中划线"
            ),
            trigger: "blur"
          }
        ]
      },
      btnDisabled: false
    }
  },
  methods: {
    // 新增
    onNewBuild() {
      this.dialogVisible = true
      this.btnDisabled = false
      this.$nextTick(_ => {
        this.$refs.refAdd.resetFields()
      })
    },

    // 确定新增
    onSubmit() {
      const vm = this
      let params = {
        ...vm.addForm
      }
      vm.$refs.refAdd.validate(valid => {
        if (valid) {
          vm.btnDisabled = true
          postTrade(params).then(res => {
            if (res.code === 200) {
              vm.getTradeList()
              vm.btnDisabled = false
              vm.dialogVisible = false
            } else {
              vm.$Message.error(res.message)
              vm.btnDisabled = false
            }
          })
        }
      })
    },

    // 加载列表
    getTradeList() {
      this.loading = true
      getTrade().then(res => {
        if (res.code === 200) {
          this.tableData = res.data
          this.loading = false
        }
      })
    },

    // 删除
    handleDelete(id) {
      const vm = this
      deleteTrade(id).then(res => {
        if (res.code === 200) {
          vm.getTradeList()
          vm.$Message.success("操作成功")
        } else {
          vm.$Message.error(res.message)
        }
      })
    }
  }
}
</script>
